<script>
import DialogOfSave from "./components/DialogOfSave.vue";
import I18nNameEditDialog from "/src/views/manage/shop/goods/components/I18nNameEditDialog.vue";
import I18nParamDialog from "/src/views/manage/shop/goods/components/I18nParamDialog.vue";
import I18nTextDialog from "/src/views/manage/shop/goods/components/I18nTextDialog.vue";

export default {
  components: {I18nTextDialog, I18nParamDialog, DialogOfSave,I18nNameEditDialog},
  data() {
    return {
      loading: false,
      requestParam: {
        data:{
          projectCode: null,
          goodsTypeId: null,
          name: null,
          sortCode: null,
          sortType: null
        },
        pageNumber: 1,
        pageSize: 10
      },
      bodyData:{
        "content": [
          {
            "bodyJsonStr": null,
            "costPrice": null,
            "detailJsonStr": null,
            "fileIdOfMain": 592191893413893,
            "gmtCreate": null,
            "gmtModified": null,
            "id": 1,
            "isRecommend": null,
            "name": "KY016-3 石子生产线 轮胎式移动砂石线设备 矿山专用车载式破碎站",
            "price": null,
            "priority": null,
            "salesVolume": {
              "gmtCreate": null,
              "gmtModified": null,
              "goodsId": 1,
              "id": 1,
              "number": 100
            },
            "salesVolumeShow": {
              "gmtCreate": null,
              "gmtModified": null,
              "goodsId": 1,
              "id": 1,
              "number": 100
            },
            "stock": {
              "gmtCreate": null,
              "gmtModified": null,
              "goodsId": null,
              "id": 1,
              "number": null
            },
            "typeId": null
          }
        ],
        "number": 1,
        "size": 100,
        "totalElements": 1,
        "totalPage": 1
      },
      typeList:[]
    }
  },
  created() {
    // 获取参数projectCode
    let projectCode = this.$route.query.projectCode;
    if(projectCode){
      this.requestParam.data.projectCode = projectCode;
    }

    this.getBodyData();
    this.getTypeList();
  },
  mounted() {
  },
  methods: {
    removeItem(id){
      this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$kt.request.send({
          uri: "/business-shop-web/admin/shopGoods/remove",
          data: {id},
          stateSuccess: () => {
            this.getBodyData();
          }
        });
      }).catch(() => {
      });
    },
    getBodyData(){
      if(this.loading){
        return;
      }
      this.loading = true;
      // /business-shop-web/admin/shopGoods/getBodyNew
      this.$kt.request.send({
        uri: "/business-shop-web/admin/shopGoodsDP/getBodyDataNew",
        data: this.requestParam,
        stateSuccess: (res) => {
          let bodyData = res.data;
          this.bodyData = this.$kt.util.deepCopy(bodyData);
          this.bodyData.content = [];
          for(let i=0;i<bodyData.content.length;i++){
            let item = bodyData.content[i];
            let bodyJson = [];
            if(item.bodyJsonStr){
              bodyJson = JSON.parse(item.bodyJsonStr);
            }
            let detailJson = [];
            if(item.detailJsonStr){
              detailJson = JSON.parse(item.detailJsonStr);
            }
            let salesVolumeNumber = null;
            if(item.salesVolume){
              salesVolumeNumber = item.salesVolume.number;
            }
            let salesVolumeShowNumber = null;
            if(item.salesVolumeShow){
              salesVolumeShowNumber = item.salesVolumeShow.number;
            }
            let stockNumber = null;
            if(item.stock){
              stockNumber = item.stock.number;
            }
            if(!item.params){
              item.params = [];
            }
            let content = item;
            content["bodyJson"] = bodyJson;
            content["detailJson"] = detailJson;
            content["salesVolumeNumber"] = salesVolumeNumber;
            content["salesVolumeShowNumber"] = salesVolumeShowNumber;
            content["stockNumber"] = stockNumber;
            this.bodyData.content.push(content);
          }
          this.loading = false;
        },
        stateFail: (err) => {
          this.$message.error(err.errMsg);
          this.loading = false;
        }
      });
    },
    getTypeList() {
      this.$kt.request.send({
        uri: "/business-shop-web/shopGoodsType/getAll",
        stateSuccess: (res) => {
          let bodyData = res.data;
          this.typeList = [];
          // 将所有parent_id为空的数据放到list中
          for (let i = 0; i < bodyData.length; i++) {
            if (!bodyData[i].parentId) {
              this.typeList.push(bodyData[i]);
            }
          }

          // 获取所有的子分类，放进list的children中
          for (let i = 0; i < this.typeList.length; i++) {
            this.typeList[i].children = [];
            for (let j = 0; j < bodyData.length; j++) {
              if (this.typeList[i].id === bodyData[j].parentId) {
                this.typeList[i].children.push(bodyData[j]);
              }
            }
          }

        }
      });
    }
  }
}
</script>

<template>
  <el-form
      label-position="top">
    <el-row gutter="40">
      <el-col :span="5">
        <el-form-item label="商品名称">
          <el-input
              @keyup.enter.native="getBodyData"
              v-model="requestParam.data.name"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item label="商品类型">
          <el-select
              @change="getBodyData"
              v-model="requestParam.data.goodsTypeId">
            <!-- 全部 -->
            <el-option
                label="全部"
                :value="null">
            </el-option>
            <el-option
                v-for="item in typeList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="5">
        <el-form-item label="排序字段">
          <el-select
              @change="getBodyData"
              v-model="requestParam.data.sortCode">
            <!-- 无 -->
            <el-option
                label="无"
                :value="null">
            </el-option>
            <el-option
                label="销量"
                value="salesVolume">
            </el-option>
            <el-option
                label="展示销量"
                value="salesVolumeShow">
            </el-option>
            <el-option
                label="库存"
                value="stock">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="5">
        <el-form-item label="排序类型">
          <el-select
              @change="getBodyData"
              v-model="requestParam.data.sortType">
            <!-- 无 -->
            <el-option
                label="无"
                :value="null">
            </el-option>
            <el-option
                label="从小到大"
                value="asc">
            </el-option>
            <el-option
                label="从大到小"
                value="desc">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <!-- 查询/刷新 -->
      <el-col :span="4">
        <el-form-item label="查询/刷新">
          <el-button
              type="primary"
              @click="getBodyData"
          >查询/刷新</el-button>
        </el-form-item>
      </el-col>

    </el-row>
  </el-form>

  <div style="height: 10px"></div>

  <div style="text-align: right">
    <el-button @click="$refs.dialogOfSave.open()"
               type="primary"
    >新增</el-button>
  </div>


  <div style="height: 10px"></div>


  <el-table
      v-loading="loading"
      :data="bodyData.content"
      :cell-style="{padding: '10px',textAlign: 'center'}"
      :border="true"
      height="calc(100vh - 200px)"
      :header-cell-style="{textAlign: 'center'}"
      style="width: 100%">
    <el-table-column
        prop="id"
        label="ID"
        width="180">
      <template #default="scope">
        <div>{{scope.row.id}}</div>
        <!-- 是否推荐 -->
        <div v-if="scope.row.isRecommend">
          <el-tag
              type="info">首页推荐</el-tag>
        </div>
      </template>
    </el-table-column>
    <el-table-column
        label="主图"
        width="200">
      <template #default="scope">
        <div
        v-if="scope.row.bodyJson&&scope.row.bodyJson.length>0"
        >
          <el-image
              v-if="scope.row.bodyJson[0].type==='fileIdOfImg'"
              style="width: 50px;height: 50px;"
              fit="cover"
              :src="$kt.file.visit(scope.row.bodyJson[0].value)"
              :preview-src-list="[$kt.file.visit(scope.row.bodyJson[0].value)]"
              :preview-teleported="true"
          ></el-image>
          <!-- 视频，不播放 -->
          <video
              v-if="scope.row.bodyJson[0].type==='fileIdOfVideo'"
              style="width: 100px;height: 100px;"
              :src="$kt.file.visit(scope.row.bodyJson[0].value)"
              controls></video>
        </div>
      </template>
    </el-table-column>
    <el-table-column
        width="180"
        prop="name"
        label="商品名称">
    </el-table-column>
    <el-table-column
        width="180"
        label="类型">
      <template #default="scope">
        <div v-if="scope.row.type?.name">
          <span v-if="scope.row.type?.parent?.name">{{scope.row.type?.parent?.name}}{{" - "}}</span>
          <span>{{scope.row.type?.name}}</span>
        </div>
        <div v-else>
          无
        </div>
      </template>
    </el-table-column>

    <el-table-column
        width="200"
        prop="salesVolume.number"
        label="价格">
      <template #default="scope">
        <div style="text-align: center">
          <div>
            <span>￥{{scope.row.price}}</span>
          </div>
          <div>
            <el-button>查看各汇率</el-button>
          </div>
        </div>
      </template>
    </el-table-column>

    <el-table-column
        width="100"
        prop="salesVolumeNumber"
        label="销量">
    </el-table-column>
    <el-table-column
        width="100"
        prop="salesVolumeShowNumber"
        label="展示销量">
    </el-table-column>
    <el-table-column
        width="100"
        prop="stockNumber"
        label="库存">
    </el-table-column>
    <!-- 固定右边 -->
    <el-table-column
        width="180"
        fixed="right"
        label="操作">
      <template #default="scope">
        <div>
          <div>
            <el-button
                @click="$refs.i18nNameEditDialog.open(scope.row)"
                size="small"
                type="primary">名称国际化</el-button>
          </div>
          <div style="height: 10px;"></div>
          <div>
            <el-button
                @click="$refs.i18nTextDialog.open(scope.row)"
                size="small"
                type="primary">属性和参数国际化</el-button>
          </div>
<!--          <div>-->
<!--            <el-button-->
<!--                @click="$refs.i18nParamDialog.open(scope.row)"-->
<!--                size="small"-->
<!--                type="primary">参数国际化</el-button>-->
<!--          </div>-->
<!--          <div style="height: 10px;"></div>-->
<!--          <div>-->
<!--            <el-button-->
<!--                size="small"-->
<!--                type="primary">属性国际化</el-button>-->
<!--          </div>-->
          <div style="height: 10px;"></div>
          <div>
            <el-button
                size="small"
                type="primary">详情页国际化</el-button>
          </div>
        </div>
        <div style="height: 10px"></div>
        <div>
          <el-button
              @click="$refs.dialogOfSave.open(scope.row)"
              type="primary" size="small">
            <kt-icon
                icon="el-icon-edit"
            ></kt-icon>
          </el-button>
          <el-button
              @click="removeItem(scope.row.id)"
              type="danger" size="small">
            <kt-icon
                icon="el-icon-delete"
                color="#fff"
            ></kt-icon>
          </el-button>
        </div>

      </template>
    </el-table-column>
  </el-table>

  <div class="bottom">
      <!-- 分页 -->
      <el-pagination
          style="margin-left: 50%;transform: translateX(-50%)"
          @size-change="getBodyData"
          @current-change="getBodyData"
          :current-page="bodyData.number"
          :page-size="bodyData.size"
          :total="bodyData.totalElements"></el-pagination>
  </div>

  <dialog-of-save
      :projectCode="this.requestParam.data.projectCode"
      @saveSuccess="getBodyData"
  ref="dialogOfSave">
  </dialog-of-save>

  <i18n-name-edit-dialog
  ref="i18nNameEditDialog"
  ></i18n-name-edit-dialog>

  <i18n-text-dialog
  ref="i18nTextDialog"
  ></i18n-text-dialog>

<!--  <i18n-param-dialog-->
<!--  ref="i18nParamDialog"-->
<!--  ></i18n-param-dialog>-->

</template>

<style scoped lang="scss">
.bottom{
  position: fixed;
  bottom: 20px;
  width: 100%;
  text-align: center;
  margin-top: 20px;
  // 超出不显示
  overflow: hidden;
}
</style>